import React, { useEffect, useState } from "react";
import ques from "../../assets/scss/questions/questions.module.scss";
import {
  getlist,
  getlidrop,
  gettype,
  getDelete,
  getDeleteAll,
} from "../../apis/questions/questions";
import type { ColumnsType } from "antd/es/table";
import {
  Col,
  Form,
  DatePicker,
  Select,
  Input,
  Pagination,
  Space,
  Table,
  Button,
  Row,
  Popconfirm,
  Modal,
} from "antd";

// 表格类型
interface DataType {
  key: React.Key;
  name: string;
  address: string;
}

const Questions = (): JSX.Element => {
  // 表格内容
  // let data: DataType[] = [];
  
  // 弹出
  const [isModalOpen, setIsModalOpen] = useState(false);
  const [red, setDate] = useState<any>({});
  const parent = (red: any) => {
    setIsModalOpen(true);
    setDate(red);
  };
  // const showModal = () => {
  //   setIsModalOpen(true);
  // };

  const handleOk = () => {
    setIsModalOpen(false);
  };

  const handleCancel = () => {
    setIsModalOpen(false);
  };

  const [list, setList] = useState({
    array: [],
    total: 0,
  });
  const [user, serpage] = useState({
    key: "",
    begindate: "", //开始时间
    enddate: "", //截至时间
    address: "", //地址
    state: "", //投诉状态
    tel: "", //手机号
    type: "", //投诉类型
    userid: "", //居民
    page: 1, //页数
    psize: 10, //条数
    startTime: "",
  });
  const onChange = (page: number, psize: number) => {
    console.log(page, psize);
    serpage({ ...user, page, psize });
  };
  useEffect(() => {
    getData();
  }, [user]);
  useEffect(() => {
    getuse();
    getgetlidrop();
  }, []);
  // 表格表头
  const columns: ColumnsType<DataType> = [
    {
      title: "id",
      dataIndex: "id",
      align: "center",
    },
    {
      title: "问题类型",
      dataIndex: "typename",
      align: "center",

      render: (_: any, record: any) => (
        <Space>
          <a
            style={{ borderBottom: "1px solid #1677ff" }}
            onClick={() => parent(record)}
          >
            {record.typename}
          </a>
        </Space>
      ),
    },
    {
      title: "问题地址",
      dataIndex: "address",
      align: "center",
    },
    {
      title: "问题描述",
      dataIndex: "memberid",
      align: "center",
    },
    {
      title: "处理状态",
      dataIndex: "statename",
      align: "center",
    },
    {
      title: "业主名称",
      dataIndex: "username",
      align: "center",
    },
    {
      title: "业主电话",
      dataIndex: "tel",
      align: "center",
    },
    {
      title: "维修日期",
      dataIndex: "startTime",
      align: "center",
    },
    {
      title: "操作",
      dataIndex: "address",
      align: "center",
      render: (_: any, record: any) => (
        <Space size="middle">
          <Popconfirm
            title="删除"
            description="是否删除该条数据?"
            onConfirm={() => del(record.id)}
            okText="Yes"
            cancelText="No"
          >
            <Button
              type="primary"
              style={{
                background: "#f56c6c",
                color: "#fff",
                marginLeft: "15px",
              }}
            >
              删除
            </Button>
          </Popconfirm>
        </Space>
      ),
    },
  ];

  //列表
  const getData = async () => {
    const res = await getlist(user);
    console.log(11111, res);
    setList({ ...list, array: res.data.list, total: res.data.counts });
    // data = list.array;
  };
  // 查询
  const onFinish = (values: any) => {
    serpage({
      ...user,
      key: values.key,
      address: values.address, //地址
      tel: values.tel, //手机号
      state: values.state, //投诉状态
      type: values.type, //投诉类型
      userid: values.userid, //居民
      //startTime:values.startTime //起始时间
      //endTime:values.endTime //结束时间
    });
  };
  // 获取下拉
  const getgetlidrop = async () => {
    const res = await getlidrop();
    console.log("吼吼", res);
    setServicesList(res.data.list);
  };
  // 获取下拉类型
  const getuse = async () => {
    const res = await gettype();
    console.log("下拉类型", res);
    setsum(res.data.list);
  };
  // 复选框
  const [selectedRowKeys, setSelectedRowKeys] = useState<React.Key[]>([]);
  const onRoomChange = (houseno: React.Key[]) => {
    console.log(houseno);
    setSelectedRowKeys(houseno);
  };
  //删除
  const del = async (id: number) => {
    const res = await getDelete({ id });
    getData();
    console.log("删除", res);
  };
  // 批量删除
  const delAll = async () => {
    // console.log(ids:selectedRowKeys);
    const res = await getDeleteAll({ ids: selectedRowKeys });
    getData();
    console.log("批量删除", res);
  };

  const questionSelection = { selectedRowKeys, onChange: onRoomChange };
  const [sertlist, setsum] = useState([]);
  const [servicesList, setServicesList] = useState([]);
  const { RangePicker } = DatePicker;
  return (
    // 外部盒子
    <div className={ques.questions}>
      {/* 头部 */}
      <div className={ques.hd}>
        <h1 className={ques.questlist}>投诉建议列表</h1>
      </div>
      <div style={{ padding: '10px 20px' }}>
        {/* 表格 */}
        <div className={ques.text}>
          <Form
            name="wrap"
            labelAlign="left"
            labelWrap
            onFinish={onFinish}
            colon={false}
          >
            <Row gutter={16}>
              <Col className={ques.gutter_row} span={5}>
                <div>
                  <Form.Item label="投诉标题:" name="key">
                    <Input placeholder="请输入投诉标题" />
                  </Form.Item>
                </div>
              </Col>
              <Col className={ques.gutter_row} span={5}>
                <div>
                  <Form.Item label="地址:" name="address">
                    <Input placeholder="请输入地址" />
                  </Form.Item>
                </div>
              </Col>
              <Col className={ques.gutter_row} span={5}>
                <div>
                  <Form.Item label="电话:" name="tel">
                    <Input placeholder="电话" />
                  </Form.Item>
                </div>
              </Col>
              <Col className={ques.gutter_row} span={6}>
                <div>
                  <Form.Item name="startTime" label="按时间查询:">
                    <RangePicker />
                  </Form.Item>
                </div>
              </Col>
            </Row>
            <Row gutter={16}>
              <Col className={ques.gutter_row} span={4}>
                <div>
                  <Form.Item label="投诉状态:" name="state">
                    <Select placeholder="请选择">
                      {servicesList.map((item: any) => {
                        return (
                          <Select.Option key={item.id} value={item.id}>
                            {item.name}
                          </Select.Option>
                        );
                      })}
                    </Select>
                  </Form.Item>
                </div>
              </Col>
              <Col className={ques.gutter_row} span={4}>
                <div>
                  <Form.Item label="投诉类型:" name="type">
                    <Select placeholder="请选择">
                      {sertlist.map((item: any) => {
                        return (
                          <Select.Option key={item.id} values={item.id}>
                            {item.name}
                          </Select.Option>
                        );
                      })}
                    </Select>
                  </Form.Item>
                </div>
              </Col>
              <Col className={ques.gutter_row} span={4}>
                <div>
                  <Form.Item label="居民:" name="name">
                    <Input placeholder="请输入居民" />
                  </Form.Item>
                </div>
              </Col>
              <Col className={ques.gutter_row} span={4}>
                <div>
                  <Button
                    type="primary"
                    htmlType="submit"
                    style={{ width: 100 }}
                  >
                    查询
                  </Button>
                </div>
              </Col>
            </Row>
          </Form>
        </div>
        {/* 批量删除 */}
        <div className={ques.btn}>
          <Button
            danger
            type="primary"
            onClick={() => delAll()}
            style={{ width: 100 }}
          >
            批量删除
          </Button>
        </div>
        {/* 表格列表 */}
        <div className={ques.buttom}>
          <Table
            rowSelection={{
              type: "checkbox",
              ...questionSelection,
            }}
            rowKey={(record: any) => record.id}
            columns={columns}
            dataSource={list.array}
            pagination={false}
          />
          <Pagination
            style={{ marginLeft: "380px", marginTop: "20px" }}
            showQuickJumper
            defaultCurrent={2}
            showTotal={(total) => `总共 ${total} 条`}
            total={list.total}
            onChange={onChange}
          />
        </div>
      </div>
      {/* 详情 */}
      <div className={ques.particulars}>
        <Modal open={isModalOpen} onOk={handleOk} onCancel={handleCancel}>
          <p style={{ textAlign: "center" }} className={ques.hd}>
            投诉详情
          </p>
          <div
            style={{
              display: "flex",
              justifyContent: "space-between",
              padding: "20px",
            }}
            className={ques.box}
          >
            <div>提交人：{red.username}</div>
            <div>维修地址:{red.address}</div>
            <div>手机号：{red.tel}</div>
          </div>
          <div
            style={{
              display: "flex",
              justifyContent: "space-around",
              marginRight: "200px",
            }}
          >
            <span>
              问题类型：
              <span className={ques.btns}>{red.statename}</span>
            </span>
            <div>问题描述：{red.content}</div>
          </div>
        </Modal>
      </div>
    </div>
  );
};
export default Questions;
